<template>
  <div ref="bar" class="bar" />
</template>

<script>
// 引入echarts
import echarts from 'echarts'
import { mapState } from 'vuex'
export default {
  name: 'LineCharts',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  computed: {
    ...mapState({
      listState: (state) => {
        return state.home.list
      }
    })
  },
  watch: {
    // 重新修改图标的配置数据
    // 图标配置数据可以再次修改，如果有新的数值，用新的数值，没有新的数值，还是用以前的数值
    title() {
      this.myChart.setOption({
        title: {
          text: this.title + '趋势'
        },
        xAxis: [
          {
            data: this.title === '销售额' ? this.listState.userFullYearAxis : this.listState.orderFullYearAxis
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: this.title === '销售额' ? this.listState.userFullYear : this.listState.orderFullYear,
            color: 'skyblue'
          }
        ]
      })
    },
    // 监听listState
    listState() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.bar)
      // 配置数据
      this.myChart.setOption({
        title: {
          text: this.title + '趋势'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.listState.userFullYearAxis,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: this.listState.userFullYear,
            color: 'skyblue'

          }
        ]
      })
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(this.$refs.bar)
    // 配置数据
    this.myChart.setOption({
      title: {
        text: this.title + '趋势'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: [],
          color: 'skyblue'

        }
      ]
    })
  }
}
</script>

<style  scoped>
.bar {
  width: 100%;
  height: 100%;
}

</style>
